<template>
	<view class="container">
		<uni-nav-bar left-icon="back" :right-text="rightText" backgroundColor="#C75540" color="#FFFFFF">
		</uni-nav-bar>
		<view class="login">
			<view class="login-title">手机号登录</view>
			<view class="login-tips">未注册手机号验证后将自动登录</view>
			<view class="login-view">
				<view class='add86'>+86▼</view>
				<input class="view-input" focus placeholder="输入手机号" v-model="mobile" />
			</view>
			<view class="login-view">
				<input class="view-input view-input-mobile" focus placeholder="验证码" v-model='code' />
				<view class="code" @click="getCode">
					获取验证码
				</view>
			</view>
		</view>

		<view class="login-btn" @click="submit">
			继续
		</view>

	</view>
</template>

<script>
	export default {
		data() {
			return {
				rightText: '密码登录',
				mobile: '', //手机号
				code: '', //验证码
			}
		},
		onLoad() {

		},
		methods: {
			//获取验证码
			getCode() {
				if(this.mobile ==''){
					this.$untils.toast({title:'手机号不能为空'});return;
				}
				
				let myreg = /^[1][3,4,5,6,7,8,9][0-9]{9}$/;
				if(!myreg.test(this.mobile)){
					this.$untils.toast({title:'请输入正确的手机格式'});return;
				}
				
				//todo 请求接口获取验证码
			},
			submit(){
				
				if(this.mobile == ''){
					this.$untils.toast({title:'手机号不能为空'});return;
				}
				
				if(this.code == ''){
					this.$untils.toast({title:'验证码不能为空'});return;
				}
				
				//todo 跳转到下个页面
				uni.navigateTo({
				    url: '/pages/index/index'
				});
			}
		}
	}
</script>

<style>
	.login {
		width: 80%;
		margin: 10upx auto;
		text-align: center;
	}

	.login-title {
		font-size: 44upx;
		margin-top: 5upx;
	}

	.login-tips {
		font-size: 26upx;
		color: #B7B7B7;
		margin-top: 25upx;
	}

	.login-view {
		width: 100%;
		height: 100upx;
		line-height: 100upx;
		border-bottom: 1px solid #EEEEEE;
		display: flex;
		margin: 50upx 0;
		text-align: left;
	}

	.add86 {
		height: 100upx;
		width: 25%;
		line-height: 100upx;
		text-align: center;
	}

	.view-input {
		height: 100upx;
		line-height: 100upx;
		width: 100%;
	}

	.view-input-mobile {
		height: 100upx;
		line-height: 100upx;
		width: 70%;
	}

	.code {
		height: 80upx;
		line-height: 80upx;
		width: 30%;
		background-color: #C75540;
		font-size: 12px;
		text-align: center;
		color: #fff;
		border-radius: 40upx;
	}

	.login-btn {
		height: 100upx;
		width: 80%;
		margin: 10upx auto;
		font-size: 36upx;
		background-color: #C75540;
		line-height: 100upx;
		text-align: center;
		border-radius: 60upx;
		color: #fff;
	}
</style>
